<template>
  <div class="img-contain">
    <div class="overlay">
      <p class="overlay-text">I don't like this one</p>
      <button @click="toggleShow" class="btn">Replace!</button>
    </div>
    <transition name="flip" mode="out-in">
      <div v-if="!isShow">
        <slot></slot>
      </div>
      <img
        v-else
        src="https://images.unsplash.com/flagged/photo-1563248101-a975e9a18cc6?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ"
        alt=""
      />
    </transition>
  </div>
</template>

<script setup lang="ts">
const isShow = ref(false);
const toggleShow = () => {
  isShow.value = !isShow.value;
};
</script>

<style scoped>
.flip-enter-active {
  transition: all 0.2s cubic-bezier(0.55, 0.085, 0.68, 0.53);
  transform-origin: 50% 50%;
}

.flip-leave-active {
  transform-origin: 50% 50%;
  transition: all 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.flip-enter-from,
.flip-leave-to {
  transform-origin: 50% 50%;
  transform: scale(0.5) translateZ(100px);
  opacity: 0;
}
</style>
